<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../react18/react.development.js"></script>
  <script src="../react18/react-dom.development.js"></script>
  <script src="../react18//babel.min.js"></script>
</head>
<body>
    <button id="btn">修改vDOM 并重新渲染</button>
  <div id="app"> </div>
  <script type="text/babel">

  /* 
    组件实例有一个state属性,当state属性发生改变的时候,组件会重新执行render得到一个新的虚拟DOM,然后开始diffing算法,并重新渲染

  */

  class Content extends React.Component{
    // state:定义当前组件内部的状态,状态是私有的
    // 需要传参就写constructor,ES8中提供如果不需要传参可以直接写,类中一旦有赋值(=),就是实例对象上的方法
    state={//state值默认是个对象,在组件实例上
      content:"真NP",
      count:0,
      isHot:true
    }
    // 只要state改变就能触发render重新调用,返回最新的一个虚拟DOM
    // 验证了虚拟DOM并不会修改,每次改变都会的得到新的虚拟DOM和旧的虚拟DOM进行比较,比较完成之后通过diffing算法得到我们需要修改的真实DOM元素进行修改

    
    // 原型对象上的方法,this指向实例
    render(){
      console.log("我render了",this);
      const{content,isHot,count}=this.state
      return (
        <div>
          <h1>title</h1>
          <p>{content}</p>
          <p>{count}</p>
          <p>{isHot?"热啊":"冷啊"}</p> 
          </div>
      )
    }
  }

  const root = ReactDOM.createRoot(document.getElementById('app'));
  root.render(<Content/>)





  </script>
</body>
</html>